<template>
    <div style="width:100%;height:100%;" id="service_request_con"></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'serviceRequests',
    mounted () {
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '25%',
                left: '5%',
                right: '5%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    name:'分钟',
                    boundaryGap: false,
                    data: ['2', '4', '6', '8', '10', '12', '14','16','18','20','22','24','26']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name:'km/h'
                }
            ],
            series: [
                {
                    name: 'km/h',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {normal: {
                        color: '#2d8cf0'
                    }},
                    data: [40,50,80,70,60,40,30,80,60,60,40,30,20]
                },
            ]
        };
        const serviceRequestCharts = echarts.init(document.getElementById('service_request_con'));
        serviceRequestCharts.setOption(option);

        window.addEventListener('resize', function () {
            serviceRequestCharts.resize();
        });
    }
};
</script>